import { useEffect, useRef, useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
  const [theme, setTheme] = useState('lightseagreen')

  // useRef Hook
  // 作用：创建一个带有 current 属性的【可变对象】
  // 特点：useRef 创建的对象将在组件更新期间【保持(引用)不变】

  // 可变对象：对象中 current 属性的值可以改变，可以存储任意类型的数据
  // 保持不变：组件更新期间，获取到的是同一个对象，引用相等
  const inputRef = useRef<HTMLInputElement>(null)

  const onClick = () => {
    const inputDom = inputRef.current!
    console.log(inputDom.value)
  }

  // 使用 useRef 创建的对象在组件更新期间保持不变
  const countRef = useRef(0)
  useEffect(() => {
    console.log('effect run')
  }, [countRef])

  // 普通对象在组件更新期间发生不变
  const user = { age: 18 }
  useEffect(() => {
    console.log('普通对象在组件更新期间会发生改变')
  }, [user])

  return (
    <div style={{ backgroundColor: theme, padding: 10 }}>
      <button
        onClick={() => setTheme(theme === 'lightseagreen' ? 'lightskyblue' : 'lightseagreen')}
      >
        切换主题
      </button>

      <h1>计数器：{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>

      <hr />
      <div>
        <input type="text" ref={inputRef} />
        <button onClick={onClick}>获取文本框的值</button>
      </div>
    </div>
  )
}

export default App
